<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>General widgets mobile test page</title>
		<link href="../icons/commonIcons.css" rel="stylesheet">
		<script type="text/javascript" src="boilerplate.js"></script>

		<script language="JavaScript" type="text/javascript">
			require([
				"dojo/parser",

				"dijit/MenuBar",
				"dijit/PopupMenuBarItem",
				"dijit/DropDownMenu",
				"dijit/MenuItem",
				"dijit/MenuSeparator",
				"dijit/PopupMenuItem",
				"dijit/Menu",

				"dijit/Toolbar",
				"dijit/ToolbarSeparator",
				"dijit/ColorPalette",
				"dijit/TooltipDialog",
				"dijit/Dialog",

				"dijit/ProgressBar",
				"dijit/InlineEditBox",
				"dijit/TitlePane",

				"dijit/Tree",
				"dojo/data/ItemFileReadStore",
				"dijit/tree/ForestStoreModel",

				"dijit/form/Button",
				"dijit/form/DropDownButton",
				"dijit/form/ComboButton",
				"dijit/form/ToggleButton",
				"dijit/form/TextBox",
				"dijit/form/DateTextBox",
				"dijit/form/TimeTextBox",

				"dojo/domReady!"
			], function(parser){
				parser.parse();
			});
		</script>
	</head>
	<body>
		<div id="menubar" data-dojo-type="dijit/MenuBar">
			<div id="file" data-dojo-type="dijit/PopupMenuBarItem">
				<span>File</span>
				<div id="fileMenu" data-dojo-type="dijit/DropDownMenu">
					<div id="new" data-dojo-type="dijit/MenuItem">New</div>
					<div id="open" data-dojo-type="dijit/MenuItem">Open</div>
					<div id="separator" data-dojo-type="dijit/MenuSeparator"></div>
					<div id="save" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIconSave"'>Save</div>
					<div id="saveas" data-dojo-type="dijit/MenuItem">Save As...</div>
				</div>
			</div>
			<div id="edit" data-dojo-type="dijit/PopupMenuBarItem">
				<span>Edit</span>
				<div id="editMenu" data-dojo-type="dijit/DropDownMenu">
					<div id="cut" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
						onClick:function(){ console.log("not actually cutting anything, just a test!"); }, accelKey:"Ctrl+X"'>Cut</div>
					<div id="copy" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
						onClick:function(){ console.log("not actually copying anything, just a test!") }, accelKey:"Ctrl+C"'>Copy</div>
					<div id="paste" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
						onClick:function(){ console.log("not actually pasting anything, just a test!") }, accelKey:"Ctrl+V"'>Paste</div>
				</div>
			</div>
			<div id="view" data-dojo-type="dijit/PopupMenuBarItem">
				<span>View</span>
				<div id="viewMenu" data-dojo-type="dijit/DropDownMenu">
					<div data-dojo-type="dijit/MenuItem">Normal</div>
					<div data-dojo-type="dijit/MenuItem">Outline</div>
					<div data-dojo-type="dijit/PopupMenuItem">
						<span>Zoom</span>
						<div id="zoomMenu" data-dojo-type="dijit/DropDownMenu">
							<div data-dojo-type="dijit/MenuItem">50%</div>
							<div data-dojo-type="dijit/MenuItem">75%</div>
							<div data-dojo-type="dijit/MenuItem">100%</div>
							<div data-dojo-type="dijit/MenuItem">150%</div>
							<div data-dojo-type="dijit/MenuItem">200%</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="toolbar1" data-dojo-type="dijit/Toolbar">
			<div id="toolbar1.cut" data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div>
			<div id="toolbar1.bold" data-dojo-type="dijit/form/ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBold", showLabel:false'>Bold2</div>
			<span data-dojo-type="dijit/ToolbarSeparator"></span>
			<div id="toolbar1.ttdialog" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
				<span>TD</span>
				<div id="tooltipDlg" data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information",
					execute:function(args){ console.log("submitted w/args:\n" + JSON.stringify(args, true)); }'>
					<table>
						<tr>
							<td><label for="user">User:</label></td>
							<td><input id="user" data-dojo-type=dijit/form/TextBox type="text" name="user"></td>
						</tr>
						<tr>
							<td><label for="password">Password:</label></td>
							<td><input id="password" data-dojo-type=dijit/form/TextBox type="password" name="pwd"></td>
						</tr>
						<tr>
							<td colspan="2" style="text-align:center;">
								<button data-dojo-type=dijit/form/Button data-dojo-props='type:"submit", name:"submit"'>Login</button></td>
						</tr>
					</table>
				</div
			></div>
			<div id="toolbar1.backcolor" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
				<span>CP</span>
				<div id="toolbar1.colorPalette" data-dojo-type="dijit/ColorPalette" data-dojo-props='style:"display: none", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
			</div
			><div id="toolbar1.combo" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true,
				onClick:function(){ console.log("clicked combo save") }'>
				<span>Menu</span>
				<div id="saveMenu" data-dojo-type="dijit/Menu" data-dojo-props='style:"display: none;"'>
					<div data-dojo-type="dijit/MenuItem"  data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave",
						onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save</div>
					<div data-dojo-type="dijit/MenuItem"
						data-dojo-props='onClick:function(){ console.log("not actually saving anything, just a test!") }'>Save As</div>
				</div>
			</div>
			<div id="toolbar1.dialog" data-dojo-type="dijit/form/Button" onclick="dialog.show();"
				 data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCreateLink"'>Dialog</div>
		</div>

		<div data-dojo-id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props='title:"My Dialog",
				onExecute:function(){ console.log("OK button pressed") },
				onCancel:function(){ console.log("Cancel button pressed") },
				"aria-describedby":"intro",
				execute:function(args){ console.log("submitted w/args:\n" + JSON.stringify(args, true)); }'>
			<div class="dijitDialogPaneContentArea">
				<label for="fname">First:</label>
				<br>
				<input id="fname" name="fname" data-dojo-type="dijit/form/TextBox">
				<br>

				<label for="lname">Last:</label>
				<br>
				<input id="lname" name="lname" data-dojo-type="dijit/form/TextBox">
				<br>

				<label for="loc">Location:</label>
				<br>
				<input id="loc" name="loc" data-dojo-type="dijit/form/TextBox">
				<br>

				<label for="date">Date:</label>
				<br>
				<input id="date" name="date" data-dojo-type="dijit/form/DateTextBox">
				<br>

				<label for="time">Time:</label>
				<br>
				<input id="time" name="time" data-dojo-type="dijit/form/TimeTextBox">
				<br>

				<label for="desc">Description:</label>
				<br>
				<input id="desc" name="desc" data-dojo-type="dijit/form/DateTextBox">
			</div>
			<div class="dijitDialogPaneActionBar">
				<button id="dialogbutton1" data-dojo-type="dijit/form/Button" data-dojo-props='type:"submit" '>OK</button>
				<button id="dialogbutton2" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ dialog.onCancel(); }
						'>Cancel</button>
			</div>
		</div>

		<br>
		<div id="tp" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Title Pane #2"'>
			<form>
				<label for="age">Age:</label> <input id="age"><br>
				<label for="disc">Discount card:</label> <input id="disc" type="checkbox"><br>
				<button>Submit</button><br>
			</form>
		</div>

		<br>
		<div id="setTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:90%",
			maximum:200, value:"20" '></div>

		<br>
		<div data-dojo-id="continentStore" data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-props='url:"_data/countries.json"'></div>
		<div data-dojo-id="continentModel" data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"},
			rootId:"continentRoot", rootLabel:"Continents", childrenAttrs:["children"]'></div>

		<div id="mytree" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, openOnClick:true'>
		</div>

		<br>
		InlineEditBox: <span id="ieb" data-dojo-type="dijit/InlineEditBox" data-dojo-props='width:"200px", title:"recipient name"'></span>

	</body>
</html>
